import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('你好flutter')),
        body: ListView(
          children: const [MyApp(), FlexLayout()],
        ),
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // TODO flex布局
    return Flex(
      direction: Axis.horizontal,
      children: [
        Expanded(
          flex: 1,
          child: IconContainer(
            Icons.home,
            color: Colors.teal.shade400,
          ),
        ),
        Expanded(
          child: IconContainer(
            Icons.ac_unit_outlined,
            color: Colors.pink.shade400,
          ),
        ),
      ],
    );
  }
}

class IconContainer extends StatelessWidget {
  Color color;
  IconData icon;
  IconContainer(this.icon, {super.key, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      color: color,
      width: 120,
      height: 120,
      child: Icon(
        icon,
        color: Colors.white,
        size: 50,
      ),
    );
  }
}

class FlexLayout extends StatelessWidget {
  const FlexLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 20, 0, 0),
      height: 500,
      // width: double.infinity,
      child: Column(
        // direction: Axis.vertical,
        children: [
          Expanded(
            flex: 1,
            child: SizedBox(
              width: double.infinity,
              child: IconContainer(
                Icons.ac_unit_rounded,
                color: Colors.deepOrangeAccent,
              ),
            ),
          ),
          const SizedBox(height: 5),
          Expanded(
            flex: 2,
            child: Row(
              children: [
                Expanded(
                  flex: 1,
                  child: SizedBox(
                    height: double.infinity,
                    child: IconContainer(
                      Icons.search,
                      color: Colors.red,
                    ),
                  ),
                ),
                const SizedBox(width: 5),
                Expanded(
                  flex: 1,
                  child: Flex(
                    direction: Axis.vertical,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                        flex: 1,
                        child: SizedBox(
                          width: double.infinity,
                          child: IconContainer(
                            Icons.padding,
                            color: Colors.blue,
                          ),
                        ),
                      ),
                      const SizedBox(height: 5),
                      Expanded(
                        flex: 1,
                        child: SizedBox(
                          width: double.infinity,
                          child: IconContainer(
                            Icons.perm_camera_mic_outlined,
                            color: Colors.green,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
